<template>
  <div>
    <div class="container">
      <div class="nav">
        <div class="uls">
          <router-link to="/" tag="a">
            <div class="con">首页</div>
          </router-link>

          <router-link tag="a" to="/news">
            <div>资讯</div>
          </router-link>
          <router-link tag="a" to="/video">
            <div>视频</div>
          </router-link>
          <router-link tag="a" to="/seek">
            <div>找车</div>
          </router-link>

          <router-link tag="a" to="/plaint">
            <div>汽车投诉</div>
          </router-link>
        </div>
        <div class="box"></div>
      </div>

      <van-tabs
        v-model="activeName"
        swipeable
        animated
        line-height="0"
        duration=".5"
        background="#eee"
      >
        <van-tab title="标签 1" name="a">
          <template #title>
            <div class="tabs">
              <div><span>品牌选车</span></div>
            </div>
          </template>

          <div class="carLogo">
            <div class="uls">
              <div class="list" v-for="(item, index) in carLogo" :key="index">
                <router-link
                  tag="a"
                  :to="{ path: '/carList', query: { userId: item.id } }"
                >
                  <div class="img">
                    <img :src="item.src" alt="" />
                  </div>
                </router-link>
                <span>{{ item.name }}</span>
              </div>
            </div>

            <router-link to="/seek" tag="div" class="wrap"
              >更多品牌</router-link
            >
          </div>
        </van-tab>
        <van-tab title="标签 2" name="b">
          <template #title>
            <div class="tabs">
              <div><span>条件选车</span></div>
            </div>
          </template>
          <div class="carPrice">
            <div class="uls">
              <div class="list" v-for="(item, index) in carPrice" :key="index">
                <a href="dazhong.html">
                  <div class="txt">
                    {{ item }}
                  </div>
                </a>
              </div>
            </div>

            <router-link to="/seekPrice" tag="div" class="wrap"
              >更多条件</router-link
            >
          </div>
        </van-tab>
        <van-tab title="标签 3" name="c">
          <template #title>
            <div class="tabs">
              <div><span>热门车型</span></div>
            </div>
          </template>
          <div class="carHot">
            <div class="uls">
              <div class="list" v-for="(item, index) in carHot" :key="index">
                <a>
                  {{ item }}
                </a>
              </div>
            </div>

            <router-link to="/seekPrice" tag="div" class="wrap"
              >更多车型</router-link
            >
          </div>
        </van-tab>
      </van-tabs>

      <div class="col">
        <h1>星迈罗配置分析</h1>
        <h2>小鹏G9售30.99万起<i></i>红旗HQ9售35.88万起</h2>
      </div>

      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban1.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban2.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban3.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban4.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban5.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban6.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
              <img src="../assets/img/ban7.jpg" alt="" />
            </div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>

      <div class="tabs tabl">
        <div><span class="con">最新</span></div>
        <div><span>新车</span></div>
        <div><span>导购</span></div>
        <div><span>测评</span></div>
        <div><span>投诉</span></div>
      </div>
      <div class="new">
        <router-link
          tag="div"
          :to="{ path: '/topic', query: { ind: item.id } }"
          v-for="(item, index) in carNews"
          :key="index"
        >
          <div class="img">
            <img :src="item.src" alt="" />
          </div>
          <div class="txt">
            <h4>{{ item.title }}</h4>
            <span>{{ item.date }} </span>
          </div>
        </router-link>
      </div>
      <div class="ele">进入资讯频道</div>
      <div class="tools">
        <div>
          <div class="img">
            <img src="http://m.315che.com/images/tool1.png" alt="" />
          </div>
          <span>购车计算</span>
        </div>
        <div>
          <div class="img">
            <img src="http://m.315che.com/images/tool2.png" alt="" />
          </div>
          <span>贷款计算</span>
        </div>
        <div>
          <div class="img">
            <img src="http://m.315che.com/images/tool3.png" alt="" />
          </div>
          <span>保险计算</span>
        </div>
        <div>
          <div class="img">
            <img src="http://m.315che.com/images/tool4.png" alt="" />
          </div>
          <span>违章查询</span>
        </div>
      </div>
      <div class="title_bar">
        <h2>选车导购</h2>
      </div>
      <div class="carlist">
        <div class="col">
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/img4/upload/2019-04-27/8e3711f1-46c2-4ee7-bf2d-f5c376373575.jpg"
                alt=""
              />
            </div>
            <span>奥迪Q3</span>
          </div>
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/img4/upload/2019-04-16/dd4b57b6-4dab-4e39-8043-74584e36af35.jpg"
                alt=""
              />
            </div>
            <span>大众速腾</span>
          </div>
        </div>
        <div class="col">
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/img4/upload/2019-04-27/79ed5e8f-74c1-4f89-8d7e-57d2c628bda4.jpg"
                alt=""
              />
            </div>
            <span>全新胜达</span>
          </div>
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/img4/upload/2019-04-29/fa1a59b8-b14e-4e35-ae55-3d85d492b812.jpg"
                alt=""
              />
            </div>
            <span>瑞虎8</span>
          </div>
        </div>
      </div>
      <div class="title_bar">
        <h2>汽车报价</h2>
        <div>
          <i></i>
          上海
        </div>
      </div>
      <div class="ele mar">查看更多汽车报价</div>
      <div class="title_bar">
        <h2>阳光车市</h2>
        <div>
          <i></i>
          上海
        </div>
      </div>
      <div class="ele mar">查看更多经销商</div>
      <div class="title_bar">
        <h2>315社区</h2>
      </div>
      <div class="carlist">
        <div class="col">
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/upload/2015-10-08/7e519151-04ce-4b9a-9083-5e6b16edcdd0.jpg"
                alt=""
              />
            </div>
            <span>小胖看车团年度钜惠震撼来袭！</span>
          </div>
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/upload/2015-10-21/30068b99-45d8-4d6f-b4aa-ea571b0ff738.jpg"
                alt=""
              />
            </div>
            <span>【金秋好味道】芹菜土豆丝</span>
          </div>
        </div>
        <div class="col">
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/upload/2015-10-19/0f31200d-8d29-4c7c-9dda-dea0bdd70c55.jpg"
                alt=""
              />
            </div>
            <span>侧卧性感足球宝贝</span>
          </div>
          <div>
            <div class="img">
              <img
                src="http://img.315che.com/upload/2015-10-19/85dc2e8b-c27e-4ecb-848b-6173cee58aaf.jpg"
                alt=""
              />
            </div>
            <span>福克斯提车记-致80后的我们！</span>
          </div>
        </div>
      </div>
      <div class="search_foot">
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "../../node_modules/swiper/css/swiper.min.css";
export default {
  props: ["carLogo", "carPrice", "carHot", "carNews"],
  data() {
    return {
      active: 3,
      tabsSwiper: null,
      activeName: 1,
    };
  },
  methods: {},
  mounted() {
    new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
  created() {
    this.$emit("car-show", true);
  },
};
</script>

<style lang="scss" scoped>
.nav {
  height: 40px;
  background-color: #35447b;
  display: flex;
  justify-content: space-between;
  text-align: center;

  .box {
    width: 20px;
    height: 100%;
    background-color: #35447b;
    box-shadow: -6px 0 10px rgb(0 0 0 / 20%);
  }

  .uls {
    display: flex;

    div {
      padding: 0 15px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 40px;
    }

    .con {
      color: #fff;
      font-weight: 700;
    }
  }
}

.tabs {
  height: 44px;

  display: flex;

  div {
    flex: 1;
    text-align: center;
    line-height: 44px;

    span {
      padding: 8px 0;
      font-size: 18px;
      color: #999;
    }

    // &:first-of-type {
    //   span {
    //
    //   }
    // }
  }
}

.van-tab--active .tabs span {
  border-bottom: 2px solid #4c61b0;
  color: #4c61b0;
}

.carLogo {
  height: 204px;
  padding: 0 10px;

  .uls {
    height: 144px;
    display: flex;
    flex-wrap: wrap;

    .list {
      width: 20%;
      height: 60px;
      margin-top: 12px;
      text-align: center;

      .img {
        width: 48px;
        height: 42px;
        margin: auto;
      }

      span {
        font-size: 12px;
        color: #333;
      }
    }
  }

  .wrap {
    height: 36px;
    background-color: #eee;
    margin-top: 15px;
    color: #666;
    line-height: 36px;
    text-align: center;
  }
}

.carPrice {
  height: 204px;
  padding: 0 10px;

  .uls {
    height: 144px;
    display: flex;
    flex-wrap: wrap;

    .list {
      width: 33%;
      height: 38px;
      margin-top: 10px;
      text-align: center;

      a {
        display: block;
        height: 36px;
        margin: 0 5px;
        border: 1px solid #e5e5e5;
        line-height: 36px;
        background-color: #f9f9f9;
        font-size: 14px;
        color: #333;
      }
    }
  }

  .wrap {
    height: 36px;
    background-color: #eee;
    margin-top: 15px;
    color: #666;
    line-height: 36px;
    text-align: center;
  }
}

.carHot {
  height: 204px;
  padding: 0 10px;

  .uls {
    height: 144px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 5px;

    .list {
      width: 33%;
      height: 35px;
      text-align: center;

      a {
        display: block;
        height: 35px;
        line-height: 35px;
        color: #666;
        font-size: 14px;
      }
    }
  }

  .wrap {
    height: 36px;
    background-color: #eee;
    margin-top: 10px;
    color: #666;
    line-height: 36px;
    text-align: center;
  }
}

.col {
  height: 42px;
  margin: 12px auto;
  text-align: center;

  h1 {
    color: #ff6600;
    font-size: 18px;
    font-weight: 600;
  }

  h2 {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;

    i {
      width: 0px;
      height: 12px;
      border-right: 1px solid #666;
      margin: 0 12px;
    }
  }

  & > div {
    flex: 1;
    text-align: center;

    .img {
      height: 112px;
      width: 168px;
      margin: auto;
    }

    span {
      padding: 0 10px;
    }
  }
}

.swiper {
  height: 250px;
  position: relative;
  overflow: hidden;

  .swiper-pagination {
    text-align: right;
    height: 20px;

    position: absolute;
    bottom: 0;
    left: 0;

    ::v-deep .swiper-pagination-bullet {
      background-color: #fff;
      opacity: 1;
    }
    ::v-deep .swiper-pagination-bullet-active {
      background-color: #ff6600;
    }
  }

  .swiper-button-prev::after {
    color: transparent;
    background-image: url("../assets/img/btn.png");
    background-position: 0 center;
  }

  .swiper-button-next::after {
    color: transparent;
    background-image: url("../assets/img/btn.png");
    background-position: 100% center;
  }
}

.banner {
  position: relative;

  .txt {
    width: 100%;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.6);
    line-height: 30px;
    color: #fff;
    text-indent: 10px;
    font-size: 12px;
    position: absolute;
    bottom: 0px;
  }

  ul {
    display: flex;
    position: absolute;
    bottom: 10px;
    right: 0;

    li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #e5e5e5;
      margin-right: 5px;

      &:first-of-type {
        background-color: #ff6600;
      }
    }
  }

  a {
    width: 35px;
    height: 60px;
    background-image: url("../assets/img/btn.png");
    position: absolute;
    top: 50%;
    margin-top: -30px;
    background-size: 100px auto;
    background-repeat: no-repeat;

    &:first-of-type {
      left: 5px;
      background-position: 0 center;
    }

    &:last-of-type {
      right: 5px;
      background-position: 100% center;
    }
  }
}

.tabl {
  display: flex;
  height: 44px;

  .con {
    border-bottom: 2px solid #4c61b0;
  }
}

.new {
  height: 378px;

  & > div {
    height: 62px;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 10px;

    .img img {
      width: 90px;
      height: 60px;
    }

    .txt {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 10px;

      h4 {
        height: 42px;
        line-height: 20px;
        font-weight: 600;
        font-size: 16px;
        color: #333;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.tools {
  height: 99px;
  padding: 0 10px;
  display: flex;
  align-items: center;

  & > div {
    flex: 1;
    text-align: center;

    .img {
      width: 80px;
      height: 43px;
      margin: auto;
    }

    span {
      font-size: 14px;
      color: #333;
    }
  }
}

.title_bar {
  display: flex;
  height: 32px;
  width: 90%;
  margin: auto;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 15px;
  justify-content: space-between;
  align-items: center;

  h2 {
    height: 100%;
    font-size: 18px;
    color: #4c61b0;
    border-bottom: 1px solid #4c61b0;
    font-weight: 600;
  }

  div {
    height: 20px;
    width: 47px;
    color: #666;
    font-size: 14px;
    display: block;
    line-height: 20px;

    i {
      width: 14px;
      height: 20px;
      float: left;
      background-image: url("../assets/img/icons1.png");
      background-position: -66px -170px;
      background-size: 500px auto;
    }
  }
}

.carlist {
  height: 314px;
  padding: 0 10px;

  .col {
    height: 147px;
    display: flex;
    justify-content: space-between;
  }
}

.mar {
  margin-top: 25px;
  margin-bottom: 12px;
}
</style>